/** 全局滚动条美化 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: var(--el-color-info-light-9);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--el-color-info-light-9);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: var(--el-color-info-light-3);
}

/** 解决滚动条挤压页面 */
html {
  overflow-y: scroll; //这是为了兼容ie8，不支持:root, vw
}


/** 全局字体美化 */
body {
  font-family: MiSans-Medium, serif;
}

@font-face {
  font-family: MiSans-Medium;
  src: url("/assets/font/MiSans-Medium.woff2");/* IE9+,可以是具体的实际链接 */
}

/** 修改element默认样式 */
.el-main {
  overflow: hidden;
  padding: 0 0 20px;
}

/** 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/** 通用线条颜色 */
.border-bottom {
  border-bottom: 1px solid #F0F0F0;
}

.border-top {
  border-top: 1px solid #F0F0F0;
}

.border-red {
  border: 1px solid var(--el-color-error);
}

.border-gray {
  border: 1px solid var(--el-color-info);
}

/** 通用阴影 */
.box-shadow {
  box-shadow: 0 1.4px 3.4px rgba(0, 0, 0, 0.035),
  0 11px 27px rgba(0, 0, 0, 0.07);
}

/** 通用圆角 */
.border-radius {
  border-radius: 8px !important;
}

/** 通用文字颜色 */
.f-black-color {
  color: var(--el-color-black);
}

.f-gray-color {
  color: var(--el-color-info);
}

.f-blue-color {
  color: var(--el-color-primary);
}

.f-red-color {
  color: var(--el-color-error);
}

/** 通用背景颜色 */
.bg-white {
  background-color: var(--el-color-white);
}

/** 通用a标签 */
a {
  color: var(--el-color-black);
  text-decoration: none;
}

a:hover {
  color: var(--el-color-primary);
}

/** 通用外边距 */
.mg-t-0 {
  margin-top: 0px;
}
.mg-t-10 {
  margin-top: 10px;
}

.mg-t-20 {
  margin-top: 20px;
}

.mg-b-0 {
  margin-bottom: 0;
}

.mg-b-10 {
  margin-bottom: 10px;
}

/** 通用内边距 */
.pd-10 {
  padding: 10px;
}

/** 通用溢出样式 */
.overflow_omit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/** 通用字体大小 */
.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

/** 通用文字居中 */
.text-center {
  text-align: center;
}

/** 通用变鼠标 */
.pointer {
  cursor: pointer;
}

/** 通用滚动 */
.overflow-scroll {
  overflow: auto;
}

/** 通用字体阴影 */
.text-shadow {
  text-shadow: -5px 5px 0 rgb(0 0 0 / 10%);
}

/** 通用文字行高 */
.text-line-height {
  line-height: 20px;
}


/** 通用flex */
.isFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/** 通用标签颜色 */
.tag-gray {
  border-width: 0 !important;
  color: #888 !important;
  background-color: rgba(136, 136, 136, .1) !important
}

.tag-red {
  border-width: 0 !important;
  color: #ff5473 !important;
  background-color: rgba(255, 84, 115, .1) !important
}

.tag-red-2 {
  border-width: 0 !important;
  color: #d6064c !important;
  background-color: rgba(194, 41, 46, 0.1) !important
}

.tag-yellow {
  border-width: 0 !important;
  color: #ff6f06 !important;
  background-color: rgba(255, 111, 6, 0.1) !important
}

.tag-yellow-2 {
  border-width: 0 !important;
  color: #c58516 !important;
  background-color: rgba(179, 103, 8, 0.1) !important
}

.tag-blue {
  border-width: 0 !important;
  color: #2997f7 !important;
  background-color: rgba(41, 151, 247, .1) !important
}

.tag-blue-2 {
  border-width: 0 !important;
  color: #5c7cff !important;
  background-color: rgba(77, 130, 249, .1) !important
}

.tag-cyan {
  border-width: 0 !important;
  color: #04b9b6 !important;
  background-color: rgba(8, 196, 193, 0.1) !important
}

.tag-green {
  border-width: 0 !important;
  color: #18a52a !important;
  background-color: rgba(18, 185, 40, .1) !important
}

.tag-green-2 {
  border-width: 0 !important;
  color: #6a933e !important;
  background-color: rgba(72, 135, 24, .1) !important
}

.tag-purple {
  border-width: 0 !important;
  color: #e434e1 !important;
  background-color: rgba(213, 72, 245, 0.1) !important
}

.tag-purple-2 {
  border-width: 0 !important;
  color: #8e4aff !important;
  background-color: rgba(154, 72, 245, 0.1) !important
}
